<template>
  <div>
    <!--  <h1>温湿度检测记录</h1> -->
    <div class="commontop">
      <div class="commontop-left">
        <el-input
          v-model="input"
          placeholder="目录、ID"
          suffix-icon="iconfont icon-sousuo2"
        ></el-input>
        <el-select clearable 
          v-show="xsyc === '1' ? true : false"
          v-model="region"
          placeholder="请选择分类"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button class="searchbgc" icon="iconfont icon-sousuo2"
          >搜索</el-button
        >
      </div>
      <div class="commontop-right">
        <p class="wd">标准温度：<span>24.26&#8451;</span></p>
        <p class="wd">标准湿度：<span>24.26%RH</span></p>
        <el-button
          v-show="xsyc === '1' ? true : false"
          @click="dialogVisible = true"
          icon="iconfont icon-xinzenganjuanmulu"
          >添加档案室</el-button
        >
      </div>
    </div>
    <div class="content">
      <el-table
        v-loading="isLoading"
        :data="tableData"
        :header-cell-style="{ backgroundColor: '#3963fd', color: '#fff' }"
        style="width: 100%; margin-top: 20px"
      >
        <template slot="empty">
          <img src="@/assets/imgs/暂未数据.png" alt style="margin-top: 104px" />
          <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
        </template>
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="archive.title" label="档案室"></el-table-column>
        <el-table-column prop="created_at" label="日期"></el-table-column>
        <el-table-column prop="temperature" label="温度"></el-table-column>
        <el-table-column prop="humidity" label="湿度"></el-table-column>
        <el-table-column prop="warning" label="预警"></el-table-column>
        <el-table-column label="操作" width="140px">
          <template slot-scope="scope">
            <el-button
              class="green"
              size="mini"
              @click="handleEdit(scope.row.id)"
              ><i class="el-icon-edit"></i
            ></el-button>
            <el-button size="mini" class="red" @click="deleteRow(scope.row.id)"
              ><i class="el-icon-delete"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current_page"
          :page-sizes="pageSizeArr"
          :page-size="pages.per_page"
          layout="total, sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      class="tab"
      title="编辑"
      width="40%"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="editForm" ref="editForm">
        <!--   <el-form-item label="日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="value1"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item> -->
        <el-form-item label="温度" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入温度"
            v-model="editForm.temperature"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="湿度" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入湿度"
            v-model="editForm.humidity"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="预警" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入预警"
            v-model="editForm.warning"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editModify('editForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      class="tab"
      title="添加档案室"
      width="30%"
      :visible.sync="dialogVisible"
    >
      <el-form :model="form">
        <el-form-item label="档案室" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入档案室"
            v-model="form.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="代码" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入代码"
            v-model="form.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  Humiture,
  HumitureIndex,
  delHumiture,
  modifyHumiture,
} from "../../../../api/Template/index";
import commonInfo from "@/utils/common";
export default {
  data() {
    return {
      //按钮显示隐藏
      xsyc: "1",

      input: "",
      /* 分类绑定值 */
      region: "",
      /* 选择分类 */
      options2: [],
      //表格
      tableData: [],
      //页数
      pages: {
        per_page: 10,
        page: 1,
      },
      //表格页面
      pageSizeArr: JSON.parse(JSON.stringify(commonInfo.pageSizeArr)),
      current_page: 1,

      total: 0,
      isLoading: false,
      //编辑蒙尘
      dialogFormVisible: false,
      formLabelWidth: "120px",
      /* 编辑表单 */
      editForm: {},
      //添加档案室
      dialogVisible: false,
      /* 添加档案室表单 */
      form: {},
    };
  },
  methods: {
    /* 获取当前表格信息 */
    async loadData(num) {
      let res = await Humiture(num);
      console.log(res);
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;
      this.per_page = res.data.data.per_page;
      this.current_page = res.data.data.current_page;
    },
    /* 表格修改 */
    async handleEdit(id) {
      let res = await HumitureIndex(id);
      console.log(res);
      this.editForm = res.data.data;
      this.dialogFormVisible = true;
    },
    //删除
    deleteRow(id) {
      this.$confirm("确认删除？").then(async () => {
        let res = await delHumiture(id);
        //console.log(res);
        if (res.data.code === 200) {
          this.$message({
            showClose: true,
            duration: 3000,
            message: res.data.msg,
            type: "success",
          });
          this.loadData();
        } else {
          this.$message({
            showClose: true,
            duration: 3000,
            message: res.data.msg,
            type: "error",
          });
        }
      });
    },
    /* 表格编辑确定 */
    editModify(formName) {
      this.$refs[formName].validate(async (valid) => {
        //console.log(valid);
        if (valid) {
          let res = await modifyHumiture(this.editForm);
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
            duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData();
          } else {
            this.$message({
              showClose: true,
            duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
        this.dialogVisibleAmend = false;
      });
    },

    //分页
    handleCurrentChange(val) {
      this.current_page = val;
      this.pages.page = val;
      this.loadData(this.pages);
    },
    //分页
    handleSizeChange(val) {
      this.pages.per_page = val;
      this.loadData(this.pages);
    },
  },
  created() {
    this.loadData();
  },
  /*  mounted: function () {
    this.loadData();
  }, */
};
</script>

<style scoped lang="less">
.commontop {
  display: flex;
  justify-content: space-between;
  .el-select {
    /deep/.el-input--suffix {
      width: 100%;
    }
  }
  .commontop-right {
    text-align: right;
    padding-right: 3px;
    display: flex;
    .wd {
      font-size: 12px;
      color: #666;
      line-height: 40px;
      margin: 0 10px;
      span {
        color: #3963fd;
      }
    }
  }
  .el-input {
    width: 22%;
    margin-right: 15px;
    background-color: #fff;
  }
}
.content {
  flex: 1;
  /deep/.el-table__header {
    margin-bottom: 20px;
  }
  /deep/.el-table {
    background-color: #f3f5fb;
  }
  /deep/.el-table .cell {
    display: flex;
  }
  /deep/.el-button--mini {
    font-size: 18px !important;
    padding: 7px 5px;
  }
}
</style>